<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">收益</block> 
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="withdraw_a">
				<view style="overflow: hidden;">
					<view class="withdraw_a_a">
						<view class="withdraw_a_a_a">{{distribution_info.total_sum}}</view>
						<view class="withdraw_a_a_b">累计佣金(元)</view>
					</view>
					<view class="withdraw_a_a">
						<view class="withdraw_a_a_a">{{distribution_info.total_success}}</view>
						<view class="withdraw_a_a_b">可提现佣金(元)</view>
					</view>
					<view class="withdraw_a_a">
						<view class="withdraw_a_a_a">{{distribution_info.total_wait}}</view>
						<view class="withdraw_a_a_b">冻结佣金(元)</view>
					</view>
				</view>
				<view class="withdraw_aa" @click="goPage('/pages/user/user_withdraw')">提现</view>
			</view>
			<view class="withdraw_b">
				<view class="withdraw_b_a">
					<view class="withdraw_b_a_a">佣金明细</view>
					<view class="withdraw_b_a_b" @click="datetime_show=true">{{start_data?start_data:'请选择时间'}}</view>
				</view>
				<view class="withdraw_b_b" v-for="(item, index) in orderList" :key="index">
					<view class="withdraw_b_b_a">
						<view class="withdraw_b_b_a_a">{{item.level==1?'直推':'间推'}}{{item.type==1?'购买商品':'购买课程'}}</view>
						<view class="withdraw_b_b_a_b">{{item.create_time}}</view>
					</view>
					<view class="withdraw_b_b_b">
						<view class="withdraw_b_b_b_a">+{{item.money}}</view>
						<view class="withdraw_b_b_b_b">{{item.status_desc}}</view>
					</view>
				</view>
			</view>
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/goods_null.png"></image>
					<text class="lighter">暂无收益</text>
				</view>
			</loading-footer>
		</view>
		<u-datetime-picker
				:show="datetime_show"
				v-model="birth"
				:minDate="-631180800000"
				:maxDate="maxDate"
				mode="year-month"
				@cancel="datetime_show=false"
				@confirm="datetime_confirm"
		></u-datetime-picker>
	</view>
</template>
<script>
import request from '@/common/request.js';
import {
	loadingType,
	trottle
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:true,
			datetime_show:false,
			uid:0,
			orderList:[],
			distribution_info:[],
			status: loadingType.LOADING,
			birth:Number(new Date()),
			maxDate:Number(new Date()),
			start_data:'',
			page: 1,
			limit:8
		}
	},
	onLoad: function (options) {
		this.onRefresh();
	},
	onShow(){
		this.uid=uni.getStorageSync('uid');
		this.getOrderinfoFun();
	},
	onReachBottom: function() {
		this.getOrderListFun();
	},
	mounted() {
		//this.index_vendor();
	},
	methods: {
		goPage(url) {
			uni.navigateTo({
				url
			});
		},
		getOrderinfoFun(){
			let paramsList = {
				'uid':this.uid
			}
			let optsList = {
				url: 'o-distribution_order_info',
				method: 'post'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if(res.data.code == 200){
					_this.distribution_info=res.data.data;
				}
				this.showLoading=false;
			});
		},
		datetime_confirm(e){
			const timeFormat = uni.$u.timeFormat;
			this.start_data= timeFormat(e.value, 'yyyy-mm');
			this.datetime_show=false;
			this.birth=e.value;
			this.onRefresh();
		},
		async getOrderListFun() {
			let {
				page,
				limit,
				orderList,
				start_data,
				status
			} = this;
			if (status == loadingType.FINISHED) return;
			const paramsList = {
				page: page,
				start_data:start_data,
				size:limit,
				uid:this.uid,
			}
			let optsList = {
				url: 'o-distribution_order_lists',
				method: 'post'
			};
			request.httpTokenRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					if(page == 1) orderList = []
					let {
						list,
						more
					} = res.data.data
					this.orderList.push(...list)
					this.page = ++page
					if (!more) {
						this.status = loadingType.FINISHED
					}
					if (this.orderList.length <= 0) {
						this.status = loadingType.EMPTY
					}
				} else {
					this.status = loadingType.ERROR
				}
				this.showLoading=false;
			});
		},
		onRefresh() {
			this.page = 1
			this.orderList = []
			this.status = loadingType.LOADING
			this.$nextTick(() => {
				this.getOrderListFun();
			});
		},
	}
}
</script>

<style  lang="scss" scoped>
	.withdraw_c{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		margin-right: 30rpx;
	}
	.withdraw_a{
		width: 700rpx;
		height:auto;
		padding: 55rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
		margin: auto;
		margin-top: 20rpx;
		overflow: hidden;
	}
	.withdraw_aa{
		font-family: Source Han Sans;
		font-size: 26rpx;
		font-weight: normal;
		line-height: 50rpx;
		color: #1890FF;
		text-align: center;
		margin-top: 40rpx;
	}
	.withdraw_a_a{
		float: left;
		width: 33.33%;
		text-align: center;
	}
	.withdraw_a_a_a{
		font-size: 48rpx;
		font-family: D-DIN;
		font-weight: bold;
		color:#3D3D3D;
	}
	.withdraw_a_a_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.withdraw_b{
		width: 700rpx;
		margin: auto;
	}
	.withdraw_b_a{
		height: 90rpx;
		line-height: 90rpx;
	}
	.withdraw_b_a_a{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		float: left;
	}
	.withdraw_b_a_b{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		float: right;
	}
	.withdraw_b_b{
		background-color: #ffffff;
		width: 710rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 45rpx 30rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}
	.withdraw_b_b_a{
		overflow: hidden;
		float: left;
		margin-left: 20rpx;
	}
	.withdraw_b_b_a_a{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #26252D;
		margin-top: 10rpx;
	}
	.withdraw_b_b_a_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BABABA;
		margin-top: 10rpx;
	}
	.withdraw_b_b_b{
		overflow: hidden;
		float: right;
	}
	.withdraw_b_b_b_a{
		font-size: 36rpx;
		font-family: DINPro;
		font-weight: 500;
		color: #E71102;
		text-align: right;
		margin-top: 10rpx;
	}
	.withdraw_b_b_b_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:#E71102;
		margin-top: 10rpx;
		text-align: right;
	}
	.withdraw_b_b_c{
		float: left;
	}
</style>